<template>
  <div>
    <div class="head" @touchend="popup('nickname')">
      <div class="icon"></div>
      <p>{{userInformation.detail.nickname?userInformation.detail.nickname:"点击修改用户名"}}</p>
    </div>
    <div class="box">
      <div class="genderBox" @touchend="popup('gender')">
        <div class="icon" :style="genderIconStyle"></div>
        <p>{{genderTitle[userInformation.detail.gender]}}</p>
      </div>
      <div class="ageBox" @touchend="popup('age')">
        <div class="icon"></div>
        <p>{{userInformation.detail.age?userInformation.detail.age:"点击修改年龄"}}</p>
      </div>
      <div class="loginBox" @touchend="setPopup({content:'暂未开放'})">
        <div class="icon" :style="loginIconStyle"></div>
        <p>{{userInformation.phoneNumber || userInformation.isWechat?userInformation.phoneNumber?"手机":"微信":"点击修改登录方式"}}
        </p>
      </div>
    </div>
    <div class="popupMain" v-if="popupMainShow">
      <transition nickname="popupAnimation">
        <div class="popup" v-if="popupShow">
          <div v-if="updateType==='nickname'">
            <div class="popup_title">修改用户名</div>
            <div class="popup_content">
              <input class="nameInput" v-model="nickname" maxlength="6" placeholder="最多输入六个字～" />
            </div>
          </div>
          <div v-if="updateType==='age'">
            <div class="popup_title">修改年龄</div>
            <div class="popup_content">
              <input class="ageInput" v-model="age" type="number" pattern="number"
                oninput="if(value.length>2)value=value.slice(0,2)" placeholder="请输入～" />
            </div>
          </div>
          <div v-if="updateType==='gender'">
            <div class="popup_title">性别选择</div>
            <div class="popup_content">
              <div class="boy" @touchend="genderTouch(1)"></div>
              <div class="gril" @touchend="genderTouch(2)"></div>
              <div class="select" :style="genderStyle"></div>
            </div>
          </div>
          <div class="popup_close" @touchend="closePopup"></div>
          <div class="popup_botton" @touchend="updateUserDetail">确定</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      updateType: "gender",
      popupMainShow: false,
      popupShow: false,
      genderTitle: ["点击修改性别", "男", "女"],
      gender: 1,
      nickname: "",
      age: 0
    }
  },
  computed: {
    //性别选择框
    genderStyle() {
      const left = this.gender === 1 ? "2.75rem" : "8.25rem"
      return {
        left: left
      }
    },
    //性别icon
    genderIconStyle() {
      const background = this.userInformation.detail.gender === 2 ? "personals/女.png" : "personals/男.png"
      return {
        background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
      }
    },
    //登录icon
    loginIconStyle() {
      const background = this.userInformation.phoneNumber ? "personals/手机.png" : "personals/微信.png"
      return {
        background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
      }
    },
    ...mapGetters("personalStatus", {
      userInformation: "getUserInformation"
    })
  },
  methods: {
    //性别选择
    genderTouch: function (number) {
      this.clickMusic()
      this.gender = number
    },
    //选择
    popup: function (param) {
      this.touchMusic()
      this.updateType = param
      this.popupMainShow = true
      setTimeout(() => { this.popupShow = true }, 0)
    },
    //关闭弹窗
    closePopup: function () {
      this.clickMusic()
      this.popupMainShow = false
      this.popupShow = false
    },
    //修改用户信息
    updateUserDetail: async function () {
      this.touchMusic()
      const userInformation = JSON.parse(JSON.stringify(this.userInformation))
      userInformation.detail[this.updateType] = this[this.updateType]
      const json = {
        deviceUuid: this.deviceUuid,
        nickname: userInformation.detail.nickname,
        gender: userInformation.detail.gender,
        age: userInformation.detail.age
      }
      const [data, err] = await this.awaitWarp(this.$post(this.api.saveDetail, json))
      if (data) {
        this.setUserDetail(userInformation.detail)
        this.popupMainShow = false
        this.popupShow = false
      }
    },
    ...mapActions("personalStatus", ["setUserDetail"]),
    ...mapActions("mainStatus", ["setPopup"])
  }
}
</script>

<style lang="stylus" scoped>
$boxStyle()
  position absolute
  $center('WHLT', 9rem, 9rem)
  background url($urlTitle + 'personals/信息背景.png') 0 0 / 100% 100%
$iconStyle()
  $coord('WHLT', 3.5rem, 3.5rem, 2.75rem, 1rem)
.head
  position absolute
  $center('WHL_T', 7rem, 7rem, 18vh)
  background url($urlTitle + 'personals/未登录-头像框背景.png') 0 0 / 100% 100%
  .icon
    $coord('WHLT', 5.5rem, 5.5rem, 0.75rem, 1.5rem)
    background url($urlTitle + 'personals/未登录-头像.png') 0 0 / 100% 100%
  p
    color rgb(249, 146, 0)
    font-size 1.2rem
    $coord('WHLB', 14rem, 2rem, -3.5rem, -3rem)
.box
  position absolute
  $center('WHL_T', 32rem, 9rem, calc(18vh + 11rem))
  color rgb(249, 146, 0)
  font-size 0.8rem
  p
    margin-top 5.5rem
  .genderBox
    $boxStyle()
    margin-left -15.5rem
    .icon
      $iconStyle()
    p
  .ageBox
    $boxStyle()
    .icon
      background url($urlTitle + 'personals/年龄.png') 0 0 / 100% 100%
      $iconStyle()
  .loginBox
    $boxStyle()
    margin-left 6.5rem
    .icon
      $iconStyle()
.popupMain
  z-index 101
  position absolute
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.5)
  color rgb(250, 250, 250)
  .popup
    $center('WHLT', 23rem, 14rem)
    position absolute
    background url($urlTitle + 'popup/popupBg.png') 0 0 / 100% 100%
    .popup_title
      $coord('WHLT', 8rem, 1.9rem, 6.5rem, 0.6rem)
      $alignCenter()
      font-size 1rem
    .popup_content
      $coord('WHLT', 15rem, 6.5rem, 3rem, 3.5rem)
      background url($urlTitle + 'popup/popupContent.png') 0 0 / 100% 100%
      box-sizing border-box
      padding 1rem
      $alignCenter()
      color rgb(251, 149, 55)
      font-size 1.2rem
      .boy
        background url($urlTitle + 'personals/性别选择-男.png') 0 0 / 100% 100%
        $coord('WHLT', 3.5rem, 3.5rem, 3rem, 1.5rem)
      .gril
        background url($urlTitle + 'personals/性别选择-女.png') 0 0 / 100% 100%
        $coord('WHRT', 3.5rem, 3.5rem, 3rem, 1.5rem)
      .select
        background url($urlTitle + 'personals/选中框.png') 0 0 / 100% 100%
        $coord('WHLT', 4rem, 4rem, 8.25rem, 1.25rem)
      .ageInput
        outline none
        width 4rem
        height 1.8rem
        font-size 1rem
        border-radius 0.5rem
        border 0.08rem solid rgb(251, 149, 55)
        box-sizing border-box
        color rgb(251, 149, 55)
        padding-left 0rem
        text-align center
      .nameInput
        outline none
        width 10rem
        height 1.8rem
        font-size 1rem
        border-radius 0.5rem
        border 0.08rem solid rgb(251, 149, 55)
        box-sizing border-box
        color rgb(251, 149, 55)
        padding-left 1rem
    .popup_close
      $coord('WHRT', 1rem, 1rem, 0.9rem, 2.9rem)
      background url($urlTitle + 'popup/popupClose.png') 0 0 / 100% 100%
    .popup_botton
      $coord('WHLB', 5rem, 2.1rem, 8rem, 1.3rem)
      background url($urlTitle + 'popup/popupBotton.png') 0 0 / 100% 100%
      $alignCenter()
      font-size 1rem
</style>